<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2025/10/13
  Time: 8:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>课程类别管理</title>
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css" />
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/back-index.css" />
  <script src="${pageContext.request.contextPath}/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap-mypaginator.js"></script>
  <script type="text/javascript" charset="utf-8">
    $(function () {

      let currentLevel = parseInt(sessionStorage.getItem('currentLevel') || '1');
      let selectedParentId = '${selectedCourseTypeId}';


      function initializeButtons() {
        if (selectedParentId && currentLevel > 1) {
          $("#back").show();
        } else {
          $("#back").hide();
        }


        if (currentLevel >= 3) {
          $("input.course-type-detail").hide();
        } else {
          $("input.course-type-detail").show();
        }
      }


      initializeButtons();
      initializeAllEvents();


      $("body").on("click", ".course-type-detail", function () {
        let courseTypeId = $(this).attr("data-id");

        currentLevel++;
        sessionStorage.setItem('currentLevel', currentLevel);
        sessionStorage.setItem('level' + currentLevel, courseTypeId);

        location.href = "${pageContext.request.contextPath}/type/findAll?parentId=" + courseTypeId;
      })


      // 返回按钮点击事件
      $("#back").on("click", function () {
        // 如果当前层级小于等于1（一级分类）
        if (currentLevel <= 1) {
          sessionStorage.removeItem('currentLevel');
          for (let i = 1; i <= 3; i++) {
            sessionStorage.removeItem('level' + i);
          }
          location.href = "${pageContext.request.contextPath}/type/findAll";
        } else {
          // 层级减1
          currentLevel--;
          // 更新当前层级
          sessionStorage.setItem('currentLevel', currentLevel);
          // 移除下一层级的存储
          sessionStorage.removeItem('level' + (currentLevel + 1));
          // 获取当前层级的父级ID
          let parentId = sessionStorage.getItem('level' + currentLevel);

          // 跳转到父级分类页面
          location.href = "${pageContext.request.contextPath}/type/findAll?parentId=" + parentId;
        }
      });

      function initializeAllEvents() {
        initializeButtons();
      }

      $("#courseTypePageHelper").bootstrapPaginator({
        bootstrapMajorVersion: 3,
        currentPage: "${typePage.pageNum == 0 ? 1 : typePage.pageNum}",
        totalPages: "${typePage.pages == 0 ? 1 : typePage.pages}",
        size: "normal",
        alignment: "center",
        pageUrl: function (type, page, current) {
          if (selectedParentId) {
            return "${pageContext.request.contextPath}/type/findAll?pageNo=" + page + "&parentId=" + selectedParentId;
          } else {
            return "${pageContext.request.contextPath}/type/findAll?pageNo=" + page;
          }
        }
      });


      $("#doAddCourseType").on("click", function() {
        $("#courseTypeModal").modal("show");
      });


      $("#courseTypeModal .cancel, .courseType-btn").on("click", function() {
        $("#courseTypeModal").modal("hide");
      });


      $("#addCourseType").on("click", function() {
        let parentId = $("#selectedCourseTypeId").val();

        if (parentId) {
          parentId = parseInt(parentId);
        } else {
          parentId = null;
        }

        $.ajax({
          type: "post",
          url: "${pageContext.request.contextPath}/type/addType",
          data: {
            "name": $("#courseType-name").val(),
            "parentId": parentId
          },
          dataType: "json",
          success: function (result) {
            if (result.responseCode == "2001") {
              if (parentId) {
                location.href = "${pageContext.request.contextPath}/type/findAll?parentId=" + parentId;
              } else {
                location.href = "${pageContext.request.contextPath}/type/findAll?pageNo=${typePage.pageNum == 0 ? 1 : typePage.pageNum}";
              }
            } else {
              $("#errorMsg").html(result.message);
            }
          }
        });
      });


      $("#courseTypeModifyModal .updateCourseType").on("click", function () {
        $.ajax({
          type: "post",
          url: "${pageContext.request.contextPath}/type/modifyType",
          data: {
            "id": $("#courseTypeId").val(),
            "name": $("#courseTypeName").val()
          },
          dataType: "json",
          success: function (result) {
            if (result.responseCode == "2001") {
              let parentId = $("#selectedCourseTypeId").val();
              if (parentId) {
                location.href = "${pageContext.request.contextPath}/type/findAll?parentId=" + parentId;
              } else {
                location.href = "${pageContext.request.contextPath}/type/findAll?pageNo=${typePage.pageNum == 0 ? 1 : typePage.pageNum}";
              }
            } else {
              $("#errorMsg").html(result.message);
            }
          }
        });
      });


      $("body").on("click", "[name='modifyStatus']", function() {
        let id = $(this).attr("data-id");
        let status = $(this).attr("data-status");

        $.ajax({
          type: "post",
          url: "${pageContext.request.contextPath}/type/modifyStatus",
          data: {"id": id, "status": status},
          dataType: "json",
          success: function(result) {
            if (result.responseCode == "2001") {
              location.reload();
            } else {
              $("#errorMsg").html(result.message);
            }
          }
        });
      });


      $("body").on("click", ".courseType-modify", function() {
        let id = $(this).attr("data-id");

        $.ajax({
          type: "post",
          url: "${pageContext.request.contextPath}/type/findById",
          data: {"id": id},
          dataType: "json",
          success: function(result) {
            if (result.responseCode == "2001") {
              let type = result.returnObject;
              $("#courseTypeId").val(type.id);
              $("#courseTypeName").val(type.typeName);
              $("#courseTypeModifyModal").modal("show");
            } else {
              $("#errorMsg").html(result.message);
            }
          }
        });
      });
    });
  </script>
</head>

<body>

<div class="panel panel-default" id="departmentSet">
  <div class="panel-heading">
    <h3 class="panel-title">课程类别管理  <span id="errorMsg" style="color: red;"></span></h3>
  </div>
  <div class="panel-body">
    <input type="button" value="添加课程类别" class="btn btn-primary" id="doAddCourseType" />
    <input type="hidden" id="selectedCourseTypeId" name="selectedCourseTypeId" value="${selectedCourseTypeId}" />
    <input type="button" value="返回上级列表" class="btn btn-success" id="back" style="float: right; display: none;" />
    <br>
    <br>
    <!-- 添加类别模态框 -->
    <div class="modal fade" tabindex="-1" id="courseTypeModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">添加类别</h4>
          </div>
          <div class="modal-body text-center">
            <div class="row text-right" id="courseType-id-input" style="display: none;">
              <label for="courseType-id" class="col-sm-4 control-label">编号：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="courseType-id" readonly />
              </div>
            </div>
            <br>
            <div class="row text-right">
              <label for="courseType-name" class="col-sm-4 control-label">类别名称：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="courseType-name" />
              </div>
            </div>
            <br>
          </div>
          <div class="modal-footer">
            <button class="btn btn-primary courseType-btn" id="addCourseType">确定添加</button>
            <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 修改类别模态框 -->
    <div class="modal fade" tabindex="-1" id="courseTypeModifyModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">课程类别修改</h4>
          </div>
          <div class="modal-body text-center">
            <div class="row text-right">
              <label for="courseTypeId" class="col-sm-4 control-label">编号：</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="courseTypeId" readonly>
              </div>
            </div>
            <br>
            <div class="row text-right">
              <label for="courseTypeName" class="col-sm-4 control-label">名称</label>
              <div class="col-sm-4">
                <input type="text" class="form-control" id="courseTypeName">
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn btn-warning updateCourseType">修改</button>
            <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
          </div>
        </div>
      </div>
    </div>

    <!-- 类别列表 -->
    <div class="show-list">
      <table class="table table-bordered table-hover" style='text-align: center;'>
        <thead>
        <tr class="text-danger">
          <th class="text-center">编号</th>
          <th class="text-center">名称</th>
          <th class="text-center">状态</th>
          <th class="text-center">操作</th>
        </tr>
        </thead>
        <tbody id="tb">
        <c:forEach items="${typePage.list}" var="type">
          <tr>
            <td>${type.id}</td>
            <td>${type.typeName}</td>
            <td>
              <c:if test="${type.status == 1}">启用</c:if>
              <c:if test="${type.status == 0}">禁用</c:if>
            </td>
            <td>
              <input type="button" class="btn btn-warning btn-sm courseType-modify" value="修改" data-id="${type.id}" />

              <c:if test="${type.status == 1}">
                <input type="button" class="btn btn-danger btn-sm doCourseTypeDisable" name="modifyStatus"
                       data-id="${type.id}" data-status="${type.status}" value="禁用">
              </c:if>
              <c:if test="${type.status == 0}">
                <input type="button" class="btn btn-success btn-sm doCourseTypeEnable" name="modifyStatus"
                       data-id="${type.id}" data-status="${type.status}" value="启用">
              </c:if>


              <input type="button" class="btn btn-success btn-sm course-type-detail" value="查询子类别" data-id="${type.id}" />

            </td>
          </tr>
        </c:forEach>
        </tbody>
      </table>
      <ul id="courseTypePageHelper"></ul>
    </div>
  </div>
</div>
</body>
</html>
